<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="赛事名称" prop="name">
                    <el-input class="w-[280px]" v-model="queryParams.name" placeholder="请输入赛事名称"/>
                </el-form-item>
                <el-form-item label="赛事地点" prop="address">
                    <el-input class="w-[280px]" v-model="queryParams.address" placeholder="请输入赛事地点"/>
                </el-form-item>
                <el-form-item label="比赛方式" prop="playType">
                    <el-select v-model="queryParams.playType" style="width: 191px" placeholder="请选择比赛方式" clearable>
                        <el-option label="男单打" value="1" />
                        <el-option label="女单打" value="2" />
                        <el-option label="男双打" value="3" />
                        <el-option label="女双打" value="4" />
                        <el-option label="男女混打" value="5" />
                    </el-select>
                </el-form-item>
                <el-form-item label="赛事赛程" prop="schedule">
                  <el-select v-model="queryParams.schedule" style="width: 191px" placeholder="请选择赛事赛程" clearable>
                    <el-option label="初赛" :value="1" />
                    <el-option label="半决赛" :value="2" />
                    <el-option label="总决赛" :value="3" />
                  </el-select>
                </el-form-item>
                <el-form-item label="组织方&nbsp;&nbsp;&nbsp;" prop="orgParty">
                    <el-input class="w-[280px]" v-model="queryParams.orgParty" placeholder="请输入组织方"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="名称" prop="name" min-width="100" />
              <el-table-column label="地址场次" prop="name" min-width="150">
                <template #default="{ row }">
                  <el-button link type="primary" @click="handleMatchScore(row)">
                    <div style="text-align: justify;">
                      <p>
                      {{row.address}}-{{row.addressName}}
                      <el-tag v-if="row.schedule == 1">初赛</el-tag>
                      <el-tag type="danger" v-else-if="row.schedule == 2">半决赛</el-tag>
                      <el-tag type="danger" v-else-if="row.schedule == 3">总决赛</el-tag>
                      </p>
                      <p>第{{row.orderNum}}场 {{row.startTime}}</p>
                    </div>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column label="比分" prop="name" min-width="60">
                <template #default="{row}">
                  {{row.playOneScore?row.playOneScore:'-'}}&nbsp;:&nbsp{{row.playTwoScore?row.playTwoScore:'-'}}
                </template>
              </el-table-column>
                <el-table-column label="红队" prop="playOneName" min-width="120">
                  <template #default="{row}">
                    <span v-if="row.status == 3">
                      <span v-if="row.playOneNo==row.result" style="display: flex;">
                        <img
                            style="padding-top: 3px;margin-right: 3px;"
                            class="w-[16px] h-[16px]"
                            src="@/assets/images/icon/shengli.png"
                        />
                        <span>{{row.playOneName}}</span>
                      </span>
                      <span v-else>{{row.playOneName}}</span>
                    </span>
                    <span v-else>{{row.playOneName}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="蓝队" prop="playTwoName" min-width="120">
                  <template #default="{row}">
                    <span v-if="row.status == 3">
                      <span v-if="row.playTwoNo==row.result" style="display: flex;">
                         <img
                             style="padding-top: 3px;margin-right: 3px;"
                             class="w-[16px] h-[18px]"
                             src="@/assets/images/icon/shengli.png"
                         />
                        <span>{{ row.playTwoName }}</span>
                      </span>
                      <span v-else>{{row.playTwoName}}</span>
                    </span>
                    <span v-else>
                      {{row.playTwoName}}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="比赛方式" min-width="70">
                    <template #default="{ row }">
                        <el-tag type="primary" v-if="row.playType==1">男单打</el-tag>
                        <el-tag type="warning" v-if="row.playType==2">女单打</el-tag>
                        <el-tag type="success" v-if="row.playType==3">男双打</el-tag>
                        <el-tag type="error" v-if="row.playType==4">女双打</el-tag>
                        <el-tag type="danger" v-if="row.playType==5">男女混打</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="状态" prop="status" min-width="60">
                  <template #default="{ row }">
                    <el-tag v-if="row.status == 0">比赛中</el-tag>
                    <el-tag type="success" v-else-if="row.status == 1">晋级</el-tag>
                    <el-tag type="success" v-else-if="row.teamStatus == 1">胜利晋级</el-tag>
                    <el-tag type="info" v-else-if="row.status == 3">结束</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="组织方" prop="orgParty" min-width="100" />
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="competition">
import {competitionScheduleLists} from '@/api/competition'
const router = useRouter()
const queryParams = reactive({
    name: '',
    address: '',
    playTime: '',
    playType: '',
    schedule: '',
    status: '',
    orgParty: '',
})

const { data: pager,refresh } = await useAsyncData(() => competitionScheduleLists({
      page_no: 1,
      page_size: 15,
      ...queryParams
    }),
    {
      default: () => ({
        page: 1,
        size: 15,
        loading: false,
        count: 0,
        lists: [] as any[],
        extend: {} as Record<string, any>
      })
    })
const resetParams = async () => {
  const paramsInit: Record<any, any> = Object.assign(
      {},
      toRsaw(queryParams)
  )
  Object.keys(paramsInit).forEach((item) => {
    queryParams[item] = paramsInit[item]
  })
  resetPage()
}
const resetPage = async () => {
  pager.page = 1
  getLists()
}
const handleMatchScore = (row:any) => {
  router.push({
    path: '/competition/match/score',
    query: {
      id: row.competitionId,
      matchId: row.id
    }
  })
}
const getLists = async () => {
  refresh()
}
</script>
